<template>
    <div id='' class=''>
        <div class="horizontal-slip-el">
            <div class="child-el">首页</div>
            <div class="child-el">日记</div>
            <div class="child-el">随笔</div>
            <div class="child-el">标签</div>
            <div class="child-el">管理</div>
            <div class="child-el">说说</div>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    props: [''],
    data() {
        return {
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        let tabsContainer = document.querySelector('.horizontal-slip-el')
        tabsContainer.addEventListener("wheel", (event) => {
            event.preventDefault();
            tabsContainer.scrollLeft += event.deltaY;
        })
    },
    methods: {},
    watch: {}
}
</script>
<style lang='less' scoped>
.horizontal-slip-el {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 300px;
    padding: 10px;
}

.child-el {
    padding: 10px;
    margin: 0 10px;
    width: 80px;
    border-radius: 6px;
    border: 1px solid #cccccc;
}
</style>